﻿<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<title>Notebook | Web Application</title>
<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="css/app.v2.css" type="text/css" />
<link rel="stylesheet" href="css/font.css" type="text/css" cache="false" />
<!--[if lt IE 9]> <script src="js/ie/html5shiv.js" cache="false"></script> <script src="js/ie/respond.min.js" cache="false"></script> <script src="js/ie/excanvas.js" cache="false"></script> <![endif]-->
</head>
<body>
<section class="hbox stretch"> <!-- .aside -->
  <aside class="bg-dark aside-md" id="nav">
    <section class="vbox">
      <header class="header dker navbar navbar-fixed-top-xs">
        <div class="navbar-header"> <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav"> <i class="fa fa-bars"></i> </a> <a href="#" class="navbar-brand" data-toggle="fullscreen"> <img src="images/logo.png" class="m-r-sm"> <span class="hidden-nav-xs">Notebook</span> </a> <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".nav-user"> <i class="fa fa-cog"></i> </a> </div>
      </header>
      <section class="w-f scrollable"> <!-- nav -->
        <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="7px" data-railOpacity="0.2">
          <div class="clearfix wrapper bg-primary nav-user hidden-xs">
            <div class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="thumb-sm avatar pull-left m-r-sm"> <img src="images/avatar.jpg"> </span> <span class="hidden-nav-xs clear"> <strong>John.Smith</strong> <b class="caret caret-white"></b> <span class="text-muted text-xs block">Art Director</span> </a> </a>
              <ul class="dropdown-menu animated fadeInRight m-t-xs">
                <span class="arrow top hidden-nav-xs"></span>
                <li> <a href="#">Settings</a> </li>
                <li> <a href="profile.html">Profile</a> </li>
                <li> <a href="#"> <span class="badge bg-danger pull-right">3</span> Notifications </a> </li>
                <li> <a href="docs.html">Help</a> </li>
                <li class="divider"></li>
                <li> <a href="modal.lockme.html" data-toggle="ajaxModal" >Logout</a> </li>
              </ul>
            </div>
          </div>
          <!-- nav -->
          <nav class="nav-primary hidden-xs">
            <ul class="nav">
              <li > <a href="index.html" > <i class="fa fa-dashboard icon"> <b class="bg-danger"></b> </i> <span>Workset</span> </a> </li>
              <li class="active"> <a href="#layout" class="active"> <i class="fa fa-columns icon"> <b class="bg-warning"></b> </i> <span class="pull-right"> <i class="fa fa-angle-down text"></i> <i class="fa fa-angle-up text-active"></i> </span> <span>Layouts</span> </a>
                <ul class="nav lt">
                  <li > <a href="layout-c.html" > <i class="fa fa-angle-right"></i> <span>Color option</span> </a> </li>
                  <li > <a href="layout-r.html" > <i class="fa fa-angle-right"></i> <span>Right nav</span> </a> </li>
                  <li class="active"> <a href="layout-h.html" class="active"> <i class="fa fa-angle-right"></i> <span>H-Layout</span> </a> </li>
                </ul>
              </li>
              <li > <a href="#uikit" > <i class="fa fa-flask icon"> <b class="bg-success"></b> </i> <span class="pull-right"> <i class="fa fa-angle-down text"></i> <i class="fa fa-angle-up text-active"></i> </span> <span>UI kit</span> </a>
                <ul class="nav lt">
                  <li > <a href="buttons.html" > <i class="fa fa-angle-right"></i> <span>Buttons</span> </a> </li>
                  <li > <a href="icons.html" > <b class="badge bg-info pull-right">369</b> <i class="fa fa-angle-right"></i> <span>Icons</span> </a> </li>
                  <li > <a href="grid.html" > <i class="fa fa-angle-right"></i> <span>Grid</span> </a> </li>
                  <li > <a href="widgets.html" > <b class="badge pull-right">8</b> <i class="fa fa-angle-right"></i> <span>Widgets</span> </a> </li>
                  <li > <a href="components.html" > <i class="fa fa-angle-right"></i> <span>Components</span> </a> </li>
                  <li > <a href="list.html" > <i class="fa fa-angle-right"></i> <span>List group</span> </a> </li>
                  <li > <a href="#table" > <i class="fa fa-angle-down text"></i> <i class="fa fa-angle-up text-active"></i> <span>Table</span> </a>
                    <ul class="nav bg">
                      <li > <a href="table-static.html" > <i class="fa fa-angle-right"></i> <span>Table static</span> </a> </li>
                      <li > <a href="table-datatable.html" > <i class="fa fa-angle-right"></i> <span>Datatable</span> </a> </li>
                      <li > <a href="table-datagrid.html" > <i class="fa fa-angle-right"></i> <span>Datagrid</span> </a> </li>
                    </ul>
                  </li>
                  <li > <a href="#form" > <i class="fa fa-angle-down text"></i> <i class="fa fa-angle-up text-active"></i> <span>Form</span> </a>
                    <ul class="nav bg">
                      <li > <a href="form-elements.html" > <i class="fa fa-angle-right"></i> <span>Form elements</span> </a> </li>
                      <li > <a href="form-validation.html" > <i class="fa fa-angle-right"></i> <span>Form validation</span> </a> </li>
                      <li > <a href="form-wizard.html" > <i class="fa fa-angle-right"></i> <span>Form wizard</span> </a> </li>
                    </ul>
                  </li>
                  <li > <a href="chart.html" > <i class="fa fa-angle-right"></i> <span>Chart</span> </a> </li>
                  <li > <a href="fullcalendar.html" > <i class="fa fa-angle-right"></i> <span>Fullcalendar</span> </a> </li>
                  <li > <a href="portlet.html" > <i class="fa fa-angle-right"></i> <span>Portlet</span> </a> </li>
                  <li > <a href="timeline.html" > <i class="fa fa-angle-right"></i> <span>Timeline</span> </a> </li>
                </ul>
              </li>
              <li > <a href="#pages" > <i class="fa fa-file-text icon"> <b class="bg-primary"></b> </i> <span class="pull-right"> <i class="fa fa-angle-down text"></i> <i class="fa fa-angle-up text-active"></i> </span> <span>Pages</span> </a>
                <ul class="nav lt">
                  <li > <a href="gallery.html" > <i class="fa fa-angle-right"></i> <span>Gallery</span> </a> </li>
                  <li > <a href="profile.html" > <i class="fa fa-angle-right"></i> <span>Profile</span> </a> </li>
                  <li > <a href="invoice.html" > <i class="fa fa-angle-right"></i> <span>Invoice</span> </a> </li>
                  <li > <a href="intro.html" > <i class="fa fa-angle-right"></i> <span>Intro</span> </a> </li>
                  <li > <a href="master.html" > <i class="fa fa-angle-right"></i> <span>Master</span> </a> </li>
                  <li > <a href="gmap.html" > <i class="fa fa-angle-right"></i> <span>Google Map</span> </a> </li>
                  <li > <a href="signin.html" > <i class="fa fa-angle-right"></i> <span>Signin</span> </a> </li>
                  <li > <a href="signup.html" > <i class="fa fa-angle-right"></i> <span>Signup</span> </a> </li>
                  <li > <a href="404.html" > <i class="fa fa-angle-right"></i> <span>404</span> </a> </li>
                </ul>
              </li>
              <li > <a href="mail.html" > <b class="badge bg-danger pull-right">3</b> <i class="fa fa-envelope-o icon"> <b class="bg-primary dker"></b> </i> <span>Message</span> </a> </li>
              <li > <a href="notebook.html" > <i class="fa fa-pencil icon"> <b class="bg-info"></b> </i> <span>Notes</span> </a> </li>
            </ul>
          </nav>
          <!-- / nav --> </div>
        <!-- / nav --> </section>
      <footer class="footer lt hidden-xs b-t b-dark">
        <div id="chat" class="dropup">
          <section class="dropdown-menu on aside-md m-l-n">
            <section class="panel bg-white">
              <header class="panel-heading b-b b-light">Active chats</header>
              <div class="panel-body animated fadeInRight">
                <p class="text-sm">No active chats.</p>
                <p><a href="#" class="btn btn-sm btn-default">Start a chat</a></p>
              </div>
            </section>
          </section>
        </div>
        <div id="invite" class="dropup">
          <section class="dropdown-menu on aside-md m-l-n">
            <section class="panel bg-white">
              <header class="panel-heading b-b b-light"> John <i class="fa fa-circle text-success"></i> </header>
              <div class="panel-body animated fadeInRight">
                <p class="text-sm">No contacts in your lists.</p>
                <p><a href="#" class="btn btn-sm btn-facebook"><i class="fa fa-fw fa-facebook"></i> Invite from Facebook</a></p>
              </div>
            </section>
          </section>
        </div>
        <a href="#nav" data-toggle="class:nav-xs" class="pull-right btn btn-sm btn-dark btn-icon"> <i class="fa fa-angle-left text"></i> <i class="fa fa-angle-right text-active"></i> </a>
        <div class="btn-group hidden-nav-xs">
          <button type="button" title="Chats" class="btn btn-icon btn-sm btn-dark" data-toggle="dropdown" data-target="#chat"><i class="fa fa-comment-o"></i></button>
          <button type="button" title="Contacts" class="btn btn-icon btn-sm btn-dark" data-toggle="dropdown" data-target="#invite"><i class="fa fa-facebook"></i></button>
        </div>
      </footer>
    </section>
  </aside>
  <!-- /.aside -->
  <section id="content">
    <section class="vbox">
      <section>
        <section class="hbox stretch">
          <section>
            <section class="vbox">
              <header class="header bg-white b-b b-light">
                <p>Layout start with a hbox</p>
              </header>
              <section class="scrollable wrapper">
                <p class="h4">Contents...</p>
              </section>
              <footer class="footer bg-white b-t b-light">
                <p>This is a footer</p>
              </footer>
            </section>
          </section>
          <aside class="bg-light lter b-l aside-md"> </aside>
        </section>
      </section>
    </section>
    <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a> </section>
</section>
<script src="js/app.v2.js"></script> <!-- Bootstrap --> <!-- App -->
</body>
</html>
